<template>
  <AreaTree v-model="list.filter.areaCode" :isAll="false" isDefault>
    <div class="app-container">
      <el-form
        ref="listFilterRef"
        :model="list.filter"
        inline
        class="list-filter"
      >
        <el-form-item prop="name">
          <el-input v-model="list.filter.name" placeholder="区域名称" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>

        <el-form-item prop="status">
          <Status v-model="list.filter.status" placeholder="启用状态" />
        </el-form-item>

        <el-button @click="reset">重置</el-button>
      </el-form>

      <div class="table-operation">
        <AuthButton @click="addItem" name="新增" />
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>

      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column label="展示顺序" prop="sort" />
        <el-table-column label="区域名称" prop="name" />
        <el-table-column label="所属地区" prop="areaName" />
        <el-table-column label="列表头图" prop="cover">
          <template slot-scope="scope">
            <PicViewer :value="scope.row.cover" tableCell />
          </template>
        </el-table-column>
        <el-table-column label="启用状态" width="80" align="center">
          <template slot-scope="{ row: { id, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="
                updateStatus({
                  id,
                  status: status ^ 1
                })
              "
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" class-name="small-padding">
          <template slot-scope="{ row }">
            <auth-button @click="u({ id: row.id })" name="编辑" />
            <auth-button @click="d({ id: row.id })" name="删除" />
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
      >
        <template #el-form>
          <el-form-item label="名称" prop="name" verify>
            <el-input
              v-model="form.data.name"
              placeholder="请输入区域名称"
              maxlength="30"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="区域封面图" prop="cover" verify>
            <Imgpond
              v-model="form.data.cover"
              :count="1"
              aspectRatio="330/244"
            />
          </el-form-item>
          <el-form-item label="区域图集" prop="img" verify>
            <Imgpond v-model="form.data.img" :count="9" aspectRatio="750/576" />
          </el-form-item>
          <el-form-item label="展示顺序" prop="sort" verify>
            <Sort v-model="form.data.sort" />
          </el-form-item>
          <el-form-item label="区域标语" prop="slogan">
            <el-input
              v-model="form.data.slogan"
              placeholder="请输入区域标语"
              maxlength="15"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="区域介绍" prop="introduction" verify>
            <MiniMCE v-model="form.data.introduction" :disabled="form.status === 'r'"/>
          </el-form-item>
        </template>
      </KiFormDialog>
    </div>
  </AreaTree>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/districtStyle'
    }, {
      getListInitially: false
    }),
  watch: {
    'list.filter.areaCode'(n, o) {
      if(n && !o) {
        this.queryList()
      }
    }
  },
  methods: {
    addItem () {
      this.form.data.areaCode = this.list.filter.areaCode || ''
      this.c()
    }
  }
}
</script>
